<template>

	<!-- <image src="../../static/icons/stillDev.svg" mode="aspectFit"></image>
		<view class="dev">
			开发中，敬请期待..
		</view> -->
	<view class="conSearch">
		<van-search :value="clubName" placeholder="请输入搜索关键词" @search="searchClub" @change='onChange' @cancel="onCancel"
			:show-action="isInSearch" />
	</view>
	<view class="conSwiper">
		<swiper circular indicator-dots autoplay>
			<swiper-item v-for="(item, index) in swiperTemp" :key="index" @click="toDetail(item.id)">
				<!-- <image src="../../static/logo.png" mode="aspectFill"></image> -->
				<image :src="item.clubLogo" mode="aspectFill"></image>
				<view class="clubName">
					{{ item.clubName }}
				</view>
			</swiper-item>
		</swiper>
	</view>
	<van-tabs v-model:active="currentType" swipeable color="blue" sticky @change="changeType" :z-index="10">
		<van-tab title='社团中心'>
			<view class="clubList" v-if="clubList.length">
				<view class="clubItem" v-for="(item, index) in clubList" :key="index" @click="toDetail(item.id)">
					<view class="cover">
						<image :src="item.clubLogo || `../../static/logo.png`" mode="aspectFill"></image>
					</view>
					<view class="name" v-html='`<span style="text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					width: 200rpx;
					display:block;">${item.clubName}</span>`'></view>
					<view class="tag">{{ item.clubIntro }}</view>
				</view>
			</view>
			<view class="noData" v-else>
				<view style="width: 100%; display: flex; justify-content: center">
					<image class="noDataImg" src="@/static/icons/noDataIcon.svg" mode="aspectFill"></image>
				</view>
				<view> 暂无数据 </view>
			</view>
		</van-tab>
		<van-tab title='我加入的'>
			<view class="myClubList">
				<view v-for="item in useUser.clubInf" :key="item.id" @click="toDetail(item.id)">
					<clubCar :data="item"></clubCar>
				</view>
			</view>
			<!-- <view class="recomment">
				<view class="reTitle">为您推荐</view>
				<view class="clubList">
					<view class="clubItem" v-for="(item, index) in 8" @click="toDetail(item.id)" :key="index">
						<view class="cover">
							<image :src="item.clubLogo || `../../static/logo.png`" mode="aspectFill"></image>
						</view>
						<view class="name">社团名字</view>
						<view class="tag">欢迎参加我们社团欢迎参加我们社团</view>
					</view>
				</view>
			</view> -->
		</van-tab>
	</van-tabs>
	<view class="notice" v-if='clubList.length && currentType === 0'>{{ listTotal === clubList.length ? `没有更多了~` :
		'加载中...' }}
	</view>
	<ToTop :ifShow='ifShowToTop' />
</template>

<script setup>
import {
	ref,
	onMounted
} from "vue";

import ToTop from "@/components/ToTop.vue";
import clubCar from "../../components/clubCar.vue";
import Tag from "@/components/Tag.vue";
import {
	onPageScroll,
	onShow,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	getClubs,
	getClubByUserId
} from "@/apis/apis.js"
import {
	useUserStore
} from "@/store/index.js"
const useUser = useUserStore();

const isInSearch = ref(false)
const ifShowToTop = ref(false)
const pageSize = 12;
const page = ref(1);
const clubName = ref('')
const listTotal = ref(-1)
const clubList = ref([])
// 后续设置对应的swiper数据
const swiperTemp = ref([])
const getClubStatu = async () => {
	const res = await getClubs({
		pageSize,
		page: page.value++,
		statu: 1, // 通过审核
		clubName: isInSearch.value ? clubName.value : ''
	})
	console.log(res);
	if (res.status === 200) {
		if (clubName.value) {
			const test = new RegExp(clubName.value, 'gi');
			res.data = res.data.map(item => {
				item.clubName = item.clubName.replace(test, (match) =>
					`<b style="color:#027cc5;">${match}</b>`)
				return {
					...item
				}
			})
		}
		clubList.value.push(...res.data);
		// 只选择前三个

		swiperTemp.value = clubList.value.map(item => {
			return {
				...item,
			}
		}).slice(0, 3)
		listTotal.value = res.total
		if (res.total === 0)
			uni.showToast({
				title: '无搜索结果',
				icon: 'error'
			})
	}
	console.log("clubGet");
}
const currentType = ref(0)
const changeType = (e) => {
	console.log('cg', e.detail.index);
	currentType.value = e.detail.index
}
const searchClub = () => {
	if (clubName.value === '')
		return uni.showToast({
			icon: 'error',
			title: '内容不能为空'
		})
	currentType.value = 0
	isInSearch.value = true
	page.value = 1
	clubList.value = []
	getClubStatu()
}
const onChange = (e) => {
	console.log('cg');
	clubName.value = e.detail
}
const onCancel = () => {
	console.log('cg');
	page.value = 1
	clubName.value = ''
	isInSearch.value = false
	clubList.value = []
	getClubStatu()
}
const getMyClub = () => {
	getClubByUserId().then(res => {
		useUser.clubInf = res.data
	})
}
onShow(() => {
	console.log(1);
	page.value = 1
	clubList.value = []
	getClubStatu()
	getMyClub()
})
onPageScroll((e) => {
	if (e.scrollTop > 400) {
		ifShowToTop.value = true
	} else {
		ifShowToTop.value = false
	}
});
const toDetail = (clubId, index) => {
	console.log(useUser.clubInf[0], index);
	// 找到useUser.clubInf中包含对应clubId的项
	const clubIdIndex = useUser.clubInf.findIndex(item => item.id === clubId)
	console.log(clubIdIndex);

	if (clubIdIndex === -1 || useUser.clubInf[clubIdIndex].statu !== 2) {
		uni.navigateTo({
			url: `/pages/clubDetail/clubDetail?clubId=${clubId}`,
		})
	}
}
onReachBottom(() => {
	console.log(`触底了`)
	if (currentType.value === 0 && listTotal.value > clubList.value.length)
		getClubStatu()
})
</script>

<style lang="less" scoped>
.clubList {
	margin-top: 30rpx;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	width: 100vw;
	overflow: hidden;

	.clubItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.cover {
			height: 130rpx;
			width: 130rpx;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.name {
			height: 60rpx;
			font-size: 32rpx;
			font-weight: 550;
			text-align: center;
			line-height: 60rpx;
			width: 200rpx;
		}

		.tag {
			height: 30rpx;
			line-height: 30rpx;
			font-size: 26rpx;
			color: grey;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 200rpx;
			text-align: center;
		}
	}
}

.noData {
	margin-top: 100rpx;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;

	image {
		height: 500rpx;
		width: 500rpx;
	}

	view {
		text-align: center;
		font-size: 45rpx;
	}
}

.conSearch {
	position: sticky;
	top: 0;
	z-index: 100;
	height: 95rpx;
}

.conSwiper {
	width: 95%;
	margin: 20rpx auto;
	height: 300rpx;

	swiper {
		width: 100%;
		height: 100%;

		swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}

			.clubName {
				position: absolute;
				bottom: 0rpx;
				left: 0rpx;
				font-size: 40rpx;
				font-weight: 550;
				color: white;
				background-color: rgba(0, 0, 0, 0.5);
				padding: 20rpx;
				width: 100%;
			}
		}

	}
}


.myClubList {}

.recomment {
	padding-bottom: 50rpx;

	.reTitle {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		font-weight: 550;
		margin-left: 30rpx;
	}
}

.notice {
	margin-top: 20rpx;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	align-items: center;
	padding-bottom: 40rpx;

}

// .club {
// 	height: 100vh;
// 	width: 100%;
// 	display: flex;
// 	flex-direction: column;
// 	justify-content: center;
// 	align-items: center;

// 	image {
// 		height: 400rpx;
// 		width: 400rpx;
// 	}

// 	.dev {
// 		font-size: 40rpx;
// 	}
// }</style>